<template>
	<view class="transactionStatistics">
		<u-navbar
			title="交易统计" 
			left-text="" 
			right-text="筛选" 
			@leftClick="onClickBack" 
			@rightClick="onClickRight"
			:placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true"
			class="nav"
		></u-navbar>
		<u-popup :show="filterTimer" @close="closeFilterTimer" mode="top" :safeAreaInsetTop="true">
			<view class="filterTimer">
				<view class="w-flex w-flex-between">
					<view class="startTime" @click="showTime = true" :style="showCurrStartTime !== '请选择日期'?'color:#000;font-size:14px;':''">
						<text>{{showCurrStartTime}}</text>
						<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
					</view>
					<text style="margin: 0 10px;">至</text>
					<view class="startTime" @click="showEndTime = true" :style="showCurrEndTime !== '请选择日期'?'color:#000;font-size:14px;':''">
						<text>{{showCurrEndTime}}</text>
						<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
					</view>
				</view>
				<view>
					<u-datetime-picker
						:show="showTime"
						:value="startTime"
						mode="date"
						@cancel="cancel"
						@confirm="confirmTime"
						:maxDate="maxDate"
						:formatter="formatter"
					></u-datetime-picker>
					<u-datetime-picker
						:show="showEndTime"
						:value="endTime"
						mode="date"
						@cancel="cancelEndTime"
						@confirm="confirmEndTime"
						:maxDate="maxDate"
						:formatter="formatter"
					></u-datetime-picker>
				</view>
				<view class="w-flex w-flex-between w-mt-20 timerChoice">
					<text class="dateStyle" :class="activeDate === 0?'activeDate':''" @click="timerToday">近三个月</text>
					<text class="dateStyle" :class="activeDate === 1?'activeDate':''" @click="timerWeek">近半年</text>
					<text class="dateStyle" :class="activeDate === 2?'activeDate':''" @click="timerMonth">近一年</text>
				</view>
				<view class="w-mt-20">
					<view>
						交易类型
					</view>
					<view class="w-mt-10 w-flex w-flex-between">
						<u-checkbox-group
							v-model="MerchantStatus"
							placement="row"
							@change="MerchantStatusChange"
							style="display: flex;flex-wrap: wrap;width: 100%;"
						>
							<u-checkbox
								v-for="(item, index) in MerchantStatusList"
								:key="index"
								:label="item.name"
								:name="item.name"
								style="width: 25%;"
								size="14"
								labelSize="12"
								labelColor="#7e7e7e"
							>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="w-mt-20">
					<view>
						订单状态
					</view>
					<view class="w-mt-10 w-flex w-flex-between">
						<u-checkbox-group
							v-model="orderStatus"
							placement="row"
							@change="orderStatusChange"
							style="display: flex;flex-wrap: wrap;width: 100%;"
						>
							<u-checkbox
								v-for="(item, index) in orderStatusList"
								:key="index"
								:label="item.name"
								:name="item.name"
								style="width: 25%;"
								size="14"
								labelSize="12"
								labelColor="#7e7e7e"
							>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				
				<view class="w-flex w-flex-between w-mt-20 bottomBtn">
					<text class="txtBtn" @click="closeFilterTimer">取消</text>
					<text class="txtBtn" style="color: #1678ff;" @click="dateFilter">确定</text>
				</view>
			</view>
		</u-popup>
		
		<view class="w-content">
			<view class="cu-list menu-avatar">
				<view class="cu-item cur"  v-for="(item, index) in orderList" :key="index">
					<view class="cu-avatar radius lg">
						<view>
							<u-avatar :src="item.avatar?item.avatar:'../../static/icon/logo.png'" size="48" shape="square"></u-avatar>
						</view>
					</view>
					<view class="content">
						<view>
							<view class="text-cut">{{item.order_id}}</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">{{item.createtime}}</view></view>
					</view>
					<view class="action">
						<view class="main-color text-xl">{{item.order_amount}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="listItem" v-if="orderList.length === 0">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/order.png"></u-empty>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-loadmore :status="status" class="w-pb-10" v-if="orderList >= 10"/>
	</view>
</template>

<script>
import {getPreMonth} from  "@/util/common.js"
export default {
	data() {
		return {
			filterTimer: false,
			showTime: false,
			showEndTime: false,
			startTime: Number(new Date().getTime() - 3600 * 1000 * 24 * 31),
			endTime: Number(new Date()),
			maxDate: Number(new Date()),
			activeDate: 2,
			showCurrEndTime: '请选择日期',
			showCurrStartTime: '请选择日期',
			orderList: [],
			MerchantStatus: ['微信','支付宝','银联扫码','POS刷卡'],
			MerchantStatusList: [
				{
					id: 1,
					name: '微信'
				},
				{
					id: 10,
					name: '支付宝'
				},
				{
					id: 20,
					name: '银联扫码'
				},
				{
					id: 30,
					name: 'POS刷卡'
				}
			],
			orderStatus: ['已关闭', '已支付', '已退款'],
			orderStatusList: [
				{
					id: 0,
					name: '已关闭'
				},
				{
					id: 20,
					name: '已支付'
				},
				{
					id: 40,
					name: '已退款'
				}
			],
			status: 'loadmore',
			page: 1,
			closeRequest: false
		}
	},
	onLoad() {
		this.showCurrStartTime = getPreMonth(12)
		this.showCurrEndTime = this.format(Number(new Date()))
		this.initDataList(this.page)
	},
	methods: {
		// 返回页面
		onClickBack () {
			uni.navigateBack()
		},
		// 筛选日期
		onClickRight(){
			this.filterTimer = true
		},
		cancel () {
			this.showTime = false
		},
		cancelEndTime () {
			this.showEndTime = false
		},
		confirmEndTime (date) {
			this.showEndTime = false
			this.showCurrEndTime = this.format(date.value)
		},
		confirmTime (date) {
			this.showCurrStartTime = this.format(date.value)
			this.showTime = false
		},
		formatter(type, value) {
			if (type === 'year') {
					return `${value}年`
			}
			if (type === 'month') {
					return `${value}月`
			}
			if (type === 'day') {
					return `${value}日`
			}
			return value
		},
		format(t, type) {
			var time = new Date(t);
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			return y+'-'+this.add0(m)+'-'+this.add0(d);
		},
		add0(m){return m<10?'0'+m:m },
		timerToday () {
			this.showCurrStartTime = getPreMonth(3);
			this.showCurrEndTime = this.format(Number(new Date()));
			this.activeDate = 0
		},
		timerWeek () {
			this.showCurrStartTime = getPreMonth(6);
			this.showCurrEndTime = this.format(Number(new Date()));
			this.activeDate = 1
		},
		timerMonth () {
			this.showCurrStartTime = getPreMonth(12);
			this.showCurrEndTime = this.format(Number(new Date()));
			this.activeDate = 2
		},
		MerchantStatusChange (list) {
			this.MerchantStatus = list
			console.log(list)
		},
		orderStatusChange (list) {
			this.orderStatus = list
			console.log(list)
		},
		closeFilterTimer () {
			this.filterTimer = false
		},
		dateFilter () {
			this.orderList = []
			this.page = 1
			this.closeRequest = false
			this.initDataList(this.page)
		},
		async initDataList (page) {
			if (this.closeRequest) {
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "没有更多了",
				})
				this.status = 'nomore'
				return
			}
			let startTime = new Date(new Date(new Date().toLocaleDateString()).getTime()) / 1000
			let endTime = parseInt(new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1) / 1000)
			let params = {
				s_time: new Date(this.showCurrStartTime).getTime(new Date(this.showCurrStartTime)) / 1000 || startTime,
				e_time: parseInt(new Date(new Date(new Date(this.showCurrEndTime).toLocaleDateString()).getTime(new Date(this.showCurrEndTime)) +24 * 60 * 60 * 1000 -1) / 1000) || endTime,
				pn: page,
				page_size: 10,
				// pay_type: this.MerchantStatus,
				// order_status: this.orderStatus
			}
			
			let str = this.MerchantStatus.toString()
			let str1 = this.orderStatus.toString()
			let urlStatus = ''
			let urlStatus1 = ''
			let urlStatus2 = ''
			let urlStatus3 = ''
			let orderStatus1 = ''
			let orderStatus2 = ''
			let orderStatus3 = ''
			if (str.indexOf('微信') !== -1) {
				urlStatus = 'pay_type[0]=1'
			}
			if (str.indexOf('支付宝') !== -1) {
				urlStatus1 = 'pay_type[1]=10'
			}
			if (str.indexOf('银联扫码') !== -1) {
				urlStatus2 = 'pay_type[2]=20'
			}
			if (str.indexOf('POS刷卡') !== -1) {
				urlStatus3 = 'pay_type[3]=30'
			}
			if (str1.indexOf('已关闭') !== -1) {
				orderStatus1 = 'order_status[0]=0'
			}
			if (str1.indexOf('已支付') !== -1) {
				orderStatus2 = 'order_status[1]=20'
			}
			if (str1.indexOf('已退款') !== -1) {
				orderStatus3 = 'order_status[2]=40'
			}
			
			let Splicing1 = orderStatus1+'&'+orderStatus2+'&'+orderStatus3
			let Splicing = urlStatus+'&'+urlStatus1+'&'+urlStatus2+'&'+urlStatus3
			const res = await this.$API({
				url: '/api/order/order_list?'+Splicing+'&'+Splicing1,
				method:"GET",
				data: params
			})
			
			if (res.code === 1) {
				
				this.filterTimer = false
				if (res.data.rows.length > 0) {
					for (let item of res.data.rows) {
						this.orderList.push(item)
					}
					this.status = 'loadmore'
				} else {
					if (this.page > 1) {
						this.status = 'nomore'
						this.$refs.uToast.show({
							type: 'default',
							title: '默认主题',
							message: "没有更多了",
						})
						this.closeRequest = true
					}
					
				}
			}
		},

	},
	onReachBottom () {
		if (this.orderList.length >= 10) {
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				this.initDataList(this.page)
				if (this.closeRequest) this.status = 'nomore';
				else this.status = 'loading';
			}, 1500)
			
		}
	}
}
</script>

<style lang="scss" scoped>
.transactionStatistics {
	
	background: #FFFFFF;
	
	.filterTimer {
		background: #FFFFFF;
		padding: 20rpx 30rpx;
		padding-bottom: 0;
		.startTime {
			background: #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #b3b3b3;
			padding: 0 20rpx;
			width: 320rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	
	.w-content {
		// padding: 10rpx 20rpx;
		// background: #F1F1F1;
		.addSalesman {
			border: 1px solid #1678ff;
			padding: 4rpx 30rpx;
			border-radius: 40rpx;
			font-size: 12px;
			color: #1678ff;
		}
		.cu-list.grid > .cu-item:after {
			border: none;
		}
		.cu-list.menu-avatar>.cu-item .action {
			width: auto;
		}
	}
	.listItem {
		background: #FFFFFF;
		padding: 10rpx 20rpx;
	}
}
</style>
